<template>
  <div class="Activity">
    <div class="ActivityInner">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.startTime"
          placement="top"
        >
          <el-card>
            <h2>活动简述</h2>
            <h3>{{ activity.content }}</h3>
            <p>报名结束时间:{{ activity.endTime }}</p>
            <el-button type="text" @click="sign(activity.id)"
              >报名参加</el-button
            >
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
import { getActivity, signUpActivity } from "@/api/user.js";
export default {
  name: "Activity",
  data() {
    return {
      login: false,
      activities: [
        {
          startTime: "2021-04-03",
          content:
            "活动简述:为了满足广大儿童与家长的娱乐、交流、学习需求,让我们的孩子们有-块专属于自己的屏幕与天空，晚报拟将晚报内部电影厅打造成专属的儿童亲子影院，定期播放专属儿童的各类电影与演出活动,如英语专场、爸爸去看电影专场、假期电影周、动漫专场等等,让亲子家庭在娱乐中提升、在快乐中沉思。同时影院将并与商业机构合作,开展各类知识讲座与交流,如儿童保险、家庭理财、儿童教育、母婴用品交流等等，在丰富儿童的业余生活，服务亲子家庭的基本需求的同时，促进家庭和谐，让父母与子女相互尊重、共同教育、-起成长",
          endTime: "2021-04-03",
        },
        {
          startTime: "2021-04-03",
          content:
            "活动简述:为了满足广大儿童与家长的娱乐、交流、学习需求,让我们的孩子们有-块专属于自己的屏幕与天空，晚报拟将晚报内部电影厅打造成专属的儿童亲子影院，定期播放专属儿童的各类电影与演出活动,如英语专场、爸爸去看电影专场、假期电影周、动漫专场等等,让亲子家庭在娱乐中提升、在快乐中沉思。同时影院将并与商业机构合作,开展各类知识讲座与交流,如儿童保险、家庭理财、儿童教育、母婴用品交流等等，在丰富儿童的业余生活，服务亲子家庭的基本需求的同时，促进家庭和谐，让父母与子女相互尊重、共同教育、-起成长",
          endTime: "2021-04-03",
        },
        {
          startTime: "2021-04-03",
          content:
            "活动简述:为了满足广大儿童与家长的娱乐、交流、学习需求,让我们的孩子们有-块专属于自己的屏幕与天空，晚报拟将晚报内部电影厅打造成专属的儿童亲子影院，定期播放专属儿童的各类电影与演出活动,如英语专场、爸爸去看电影专场、假期电影周、动漫专场等等,让亲子家庭在娱乐中提升、在快乐中沉思。同时影院将并与商业机构合作,开展各类知识讲座与交流,如儿童保险、家庭理财、儿童教育、母婴用品交流等等，在丰富儿童的业余生活，服务亲子家庭的基本需求的同时，促进家庭和谐，让父母与子女相互尊重、共同教育、-起成长",
          endTime: "2021-04-03",
        },
      ],
    };
  },
  methods: {
    // 点击报名
    sign(aid) {
      if (this.login == false) {
        this.$confirm("系统没有检测到您的登录信息，是否去登录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/Login");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消登录",
            });
          });
      } else {
        signUpActivity(aid, localStorage.getItem("uid")).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "报名成功",
            });
          } else {
            // 报名失败
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
      }
    },

    // 判断是否登录
    isLogin: function () {
      if (localStorage.getItem("token") !== null) {
        this.login = true;
      }
    },

    // 获取活动列表
    getActivity: function () {
      getActivity().then((res) => {
        this.activities = res.data;
      });
    },
  },
  mounted() {
    this.getActivity();
    this.isLogin();
  },
};
</script>

<style lang='less' scoped>
.Activity {
  margin-top: 80px;
  width: 100%;
  .ActivityInner {
    width: 1440px;
    margin: 0 auto;
    p {
      font-size: 16px;
      color: darkgrey;
    }
  }
}
</style>